<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib//mapbox-gl2.6.1.js"></script>
    <link href="./lib/mapbox-gl2.6.1.css" rel="stylesheet" />
    <script src='./lib/mapbox-gl-language.js'></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <!-- <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script> -->
    <script src="./lib/turf.min.js"></script>
</head>

<body>
    <div id="map" style="height: 600px;"></div>
    <script>
        // import { Scene, Marker } from '@antv/l7';
        // import { GaodeMap } from '@antv/l7-maps';
        // import * as G2 from '@antv/g2';

        /** 数据初始化 */
        let ip1 = '6ql20nip.ipyingshe.net';
        // let ip1 = '192.168.0.53:8080';
        let tileurl = `http://${ip1}/geoserver/gwc/service/tms/1.0.0/rp7%3Agv_cun_pt@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf`;
        //查询点图层数据
        let level = 'cun'
        let fields = 'f176,f297,f158'
        let url2 = `http://${ip1}/geoserver/rp7/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json&typeName=rp7:gv_${level}_pt&propertyName=geom,${fields}&format_options=id_policy:reference_no=false`


        /** 地图初始化 */
        mapboxgl.accessToken =
            "pk.eyJ1IjoiaG91eGlleXUiLCJhIjoiY2pldjE5amU3NndzeDM5bzd5bm9ncDgycyJ9.j1F-Lgid3L5k2Abm8_xTeQ";
        const map = new mapboxgl.Map({
            container: "map", // container ID
            style: "mapbox://styles/mapbox/streets-v11", // style URL
            center: [117.125829, 36.656704], // starting position [lng, lat]
            zoom: 7, // starting zoom
        });

        map.addControl(
            new MapboxLanguage({
                defaultLanguage: "zh-Hans",
            })
        );

        map.on('load', async () => {
            let geores = await $.getJSON(url2,{
                // cql_filter:`code like '3701%'`,
            });
            console.log(geores)
            let url = `http://${ip1}/geoserver/rp7/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json&format_options=id_policy:reference_no=false`;
            let res = await $.getJSON(url, {
                typeName: `rp7:g_shi`,
                maxFeatures:500,
                propertyName:'geom,code,codename'
                // cql_filter: `INTERSECTS(geom, POLYGON((116 35, 116 36 , 117 36,117 35, 116 35)))`,
            })
            map.addSource("bj", {
                type: "geojson",
                data: res
            });
            map.addLayer({
                id: `fill_bj`,  
                type: "fill",
                source: `bj`,
                paint: {
                    "fill-color": "red",
                    'fill-outline-color': "black",
                    'fill-opacity':0.2
                }
            });

            addChart(geores);
        });

        async function addChart(geores) {
            var sdEllipse = turf.featureCollection([
            // turf.standardDeviationalEllipse(geores,{weight:'f176',devmulti:2}),
            turf.standardDeviationalEllipse(geores,{weight:'f176',devmulti:1}),
                // turf.standardDeviationalEllipse(geores,{weight:'f176',devmulti:0.5}),
        ]);
            var sdEllipse2 = turf.standardDeviationalEllipse(geores,{weight:'f297'});
            console.log(sdEllipse)
            map.addSource('pts', {
                'type': 'geojson',
                'data': geores
            });
            map.addSource('maine', {
                'type': 'geojson',
                'data': sdEllipse
            });

            // Add a new layer to visualize the polygon.
            map.addLayer({
                'id': 'maine',
                'type': 'fill',
                'source': 'maine', // reference the data source
                'layout': {},
                'paint': {
                    'fill-color': '#0080ff', // blue color fill
                    'fill-opacity': 0.5
                }
            });
            map.addSource('maine2', {
                'type': 'geojson',
                'data': sdEllipse2
            });

            // Add a new layer to visualize the polygon.
            let l2 = {
                'id': 'maine2',
                'type': 'fill',
                'source': 'maine2', // reference the data source
                'layout': {},
                'paint': {
                    'fill-color': '#ff8000', 
                    'fill-opacity': 0.5
                }
            };
            // map.addLayer(l2);
            let max = 10000000;
            map.addLayer(
                {
                    'id': 'points',
                    'type': 'circle',
                    'source': 'pts',
                    'paint': {
                        // Size circle radius by earthquake magnitude and zoom level
                        'circle-radius': ['interpolate', ['linear'], ['get', 'f176'], 1, 1, max, 50],
                        'circle-stroke-color': 'white',
                        'circle-stroke-width': 1,
                        'circle-color': '#B42222'
                    }
                },
                'waterway-label'
            );

   
        }
    </script>
</body>

</html>